<template>
  <div>
    <!--图片区域-->
    <el-row>
      <el-col :span="24" align="center">
        <img src="../../assets/eaton.png" height="168" width="1069"/></el-col>
    </el-row>
    <!--项目选择下拉框区域-->
    <el-row>
      <el-col :span="24" align="center">
        <div class="select-container">
          <div class="select-item">
            <label>选择项目:</label>

            <el-select v-model="project_id" placeholder="请选择项目" @change="getWellInfoListById(project_id)">
              <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.project_name"
                  :value="item.id"
              />
            </el-select>
          </div>
          <!--选择井-->
          <div class="select-item" style="margin-top: 20px;">
            <label>选择井:</label>
            <el-select v-model="well_id" placeholder="请选择井">
              <el-option
                  v-for="item in wellList"
                  :key="item.id"
                  :label="item.well_name"
                  :value="item.id"
              />
            </el-select>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--输入参数区域-->
    <el-row style="margin-top: 20px" justify="center">
      <el-col :span="6" :offset="8">
        <div style="text-align: center">
          <el-form :model="form" :rules="rules" ref="formRef" label-width="200px">
            <el-form-item label="depth" prop="depth">
              <el-input v-model="form.depth" placeholder="请输入depth">
                <template slot="suffix">
                  <el-tooltip
                      content="深度"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="ρp" prop="ρp">
              <el-input v-model="form.ρp" placeholder="请输入ρp">
                <template slot="suffix">
                  <el-tooltip
                      content="当量密度"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <!--按钮区域-->
          <div style="margin-left: 120px; margin-top: 20px;">
            <el-button type="primary" @click="calculate">计算</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from "@/api/api";

export default {
  data() {
    return {
      well_id: '',
      wellList:[],
      project_id: '',
      projectList: [],
      form: {
        depth: '',
        ρp: '',
      },
      rules: {
        depth: [
          {required: true, message: '请输入depth', trigger: 'blur'},
        ],
        ρp: [
          {required: true, message: '请输入ρp', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    //项目下拉框改变事件
    getWellInfoListById(project_id) {
      //每次选择都先清空
      this.wellList = [];
      this.well_id = '';
      if (!project_id) {
        this.wellList = [];
        this.well_id = '';
        return;
      }
      const map = {
        project_id: project_id,
      }
      api.post("/project/getWellListByProjectId", map).then(res => {
        this.wellList = res.data.wellInfoList;
        console.log(res);
      })
    },
    //获取所有的项目
    getProjectList() {
      const map = {
        currentPage: 0,
        keyword: "",
      }
      api.post("/project/getProjectList", map).then(res => {
        this.projectList = res.data.projectList;
      })
    },
    //计算
    calculate() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const map = {
            project_id: this.project_id,
            well_id: this.well_id,
            depth: this.form.depth,
            ρp: this.form.ρp,
          }
          api.post("/project/updateNByProjectId", map).then(res => {
            this.$message({
              message: '计算成功',
              type: 'success'
            })
          }).catch(err => {
            this.$message({
              message: err.message,
              type: 'error'
            })
          })
        } else {
          this.$message({
            message: '请填写完整参数',
            type: 'error'
          })
        }
      })
    },
  },
  mounted() {
    this.getProjectList();
  },
}
</script>

<style scoped>
.select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>